<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Our City</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="http://maps.google.com/maps/api/js?sensor=false"
		type="text/javascript"></script>
</h:head>


<h:body>

	<script type="text/javascript">
		var t;

		function startTimer() {
			t = setTimeout("PF('statusDialog').show()", 1500);
		}

		function stopTimer() {
			clearTimeout(t);
		}
	</script>

	<p:ajaxStatus onstart="startTimer();"
		onsuccess="PF('statusDialog').hide(); stopTimer();"
		onerror="stopTimer(); PF('statusDialog').hide()" />

	<p:dialog modal="true" widgetVar="statusDialog" header="Status"
		draggable="false" closable="false">
		<p:graphicImage value="/resources/design/ajax-loader.gif" />
	</p:dialog>

	<h:outputStylesheet target="head" library="css"
		name="bootstrap-theme.css" />
	<h:outputStylesheet target="head" library="css" name="bootstrap.css" />

	<p:menubar id="tabmenu" activeIndex="0">
		<p:menuitem value="Home"
			url="/home.xhtml?userID=#{loginBean.userID}" icon="ui-icon-home"
			update="@all" />
		<p:menuitem value="Search" url="/search.xhtml" icon="ui-icon-search"
			update="@all" />
		<p:menuitem value="Add a place" url="/create.xhtml"
			icon="ui-icon-plus" update="@all" rendered="#{loginBean.loggedIn}" />
		<p:menuitem value="Help" url="/help.xhtml"
			icon="ui-icon-help"/>

		<f:facet name="options">
			<p:commandButton value="Register" rendered="#{! loginBean.loggedIn}"
				oncomplete="PF('registerDialogWidget').show()" />
			<p:commandButton value="Login" rendered="#{! loginBean.loggedIn}"
				oncomplete="PF('loginDialogWidget').show()" />
			<h:form>
				<p:commandButton value="Logout" rendered="#{loginBean.loggedIn}"
					action="#{loginBean.logout}" oncomplete="location.reload()"
					icon="ui-icon-power" />
			</h:form>
		</f:facet>
	</p:menubar>

	<div id="content" class="container">
		<div id="maincontent" class="starter-template">
			<ui:insert name="content">Page body here</ui:insert>
		</div>
	</div>

	<h:form id="loginForm">
		<p:growl id="growl" showDetail="true" life="2500" />

		<p:dialog id="loginDialog" header="Login"
			widgetVar="loginDialogWidget" resizable="false">

			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="username" value="Email:" />
				<p:inputText value="#{loginBean.username}" id="username"
					required="true" label="username"
					validatorMessage="Invalid email format">
					<f:validateRegex
						pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
				</p:inputText>
				<h:outputLabel for="password" value="Password:" />
				<h:inputSecret value="#{loginBean.password}" id="password"
					required="true" label="password"
					validatorMessage="Password is required" />

				<f:facet name="footer">
					<p:commandButton id="loginButton" value="Login" update="growl"
						action="#{loginBean.login}"
						oncomplete="handleLoginRequest(xhr, status, args)" />
				</f:facet>
			</h:panelGrid>

		</p:dialog>
	</h:form>

	<h:form id="RegisterForm">
		<p:growl id="growl" showDetail="true" life="2500" />

		<p:dialog id="registerDialog" header="Register"
			widgetVar="registerDialogWidget" resizable="false">

			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="name" value="Name:" />
				<p:inputText value="#{loginBean.name}" id="name" required="true"
					label="name">
					<f:validateLength minimum="2" />
				</p:inputText>


				<h:outputLabel for="surname" value="Surname:" />
				<p:inputText value="#{loginBean.surname}" id="surname"
					required="true" label="surname" />

				<h:outputLabel for="username" value="Email:" />
				<p:inputText value="#{loginBean.username}" id="username"
					required="true" label="username"
					validatorMessage="Invalid email format">
					<f:validateRegex
						pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
				</p:inputText>

				<h:outputLabel for="password" value="Password:" />
				<h:inputSecret value="#{loginBean.password}" id="password"
					required="true" label="password"
					validatorMessage="Password length should be at least 6">
					<f:validateLength minimum="6" />
				</h:inputSecret>

				<f:facet name="footer">
					<p:commandButton id="registerButton" value="Register"
						update="growl" action="#{loginBean.register}"
						oncomplete="handleRegisterRequest(xhr, status, args)" />
				</f:facet>
			</h:panelGrid>

		</p:dialog>
	</h:form>

	<script type="text/javascript">
		function handleLoginRequest(xhr, status, args) {
			if (args.validationFailed || !args.loggedIn) {
				PF('loginDialogWidget').jq.effect("shake", {
					times : 5
				}, 100);
			} else {
				PF('loginDialogWidget').hide();
				location.reload();
			}
		}
		function handleRegisterRequest(xhr, status, args) {
			if (args.validationFailed || !args.registered) {
				PF('registerDialogWidget').jq.effect("shake", {
					times : 5
				}, 100);
			} else {
				PF('registerDialogWidget').hide();
				location.reload();
			}
		}
	</script>

</h:body>
</html>
